<template>
	<view class="u-p-b-80">
		<view class="cell-page">
			<u-cell-group>
				<u-cell v-if="Object.keys(this.address).length" size="large" :title="address.name+' '+address.phone"
					isLink url="/pages/cart/address"
					:label="address.province+address.city+address.county+address.address"></u-cell>
				<u-cell v-else size="large" title="当前还无收货地址，请添加地址!" isLink url="/pages/cart/address"></u-cell>
			</u-cell-group>
		</view>
		<view v-for="(item,index) in goodsList" :key="index" class="goodsInfo u-flex u-p-10 u-m-b-20">
			<view @click="details(item.goods_id)">
				<u-image border-radius="15" width="200rpx" height="200rpx" :src="item.goods.cover_url">
				</u-image>
			</view>
			<view class="goodsBaseInfo u-flex u-row-between u-col-top u-p-10">
				<view class="priceNum" @click="details(item.goods_id)">
					<text class="title u-p-l-10 u-font-32">{{item.goods.title}}</text>
				</view>
				<view class="priceNum u-flex u-row-between">
					<text class="price u-font-34">￥{{item.goods.price}}</text>
					<text>x{{item.num}}</text>
				</view>
			</view>
		</view>
		<view class="bottomFixed u-flex u-p-15">
			<view class="u-flex u-flex-1 u-row-around">
				<view class="u-flex-5 u-text-center">
					<text class="title">合计:</text>
					<text class="price">￥{{totlePrice}}</text>
				</view>
				<view class="u-flex-5 u-text-center">
					<u-button type="primary" shape="square" :disabled="disabled" @click="order">提交订单并支付</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let access_token;
	export default {
		data() {
			return {
				hasAddress: false, //是否有地址
				address: {}, //收货地址
				goodsList: [],
				totlePrice:0, //商品总价
				disabled:true //提交订单按钮是否可用（有地址才能用）
			}
		},
		async onLoad(options) {
			if (!uni.$u.utils.isLogin()) {
				return;
			}			
			access_token = uni.getStorageSync('access_token');
			let res = await uni.$u.http.get('/api/orders/preview', {
				header: {
					Authorization: 'bearer ' + access_token
				}
			});
			console.log(res);
			if (options.id) {
				//如果有这个id，说明是从地址列表页选择了新地址回来的，就设置此地址为当前选中地址
				res.address.some((item) => {
					if (item.id == options.id) {
						this.address = item; //有默认地址，就把收货地址设置成默认地址
						return true;
					}
				})
			} else {
				//否则，说明是刚进入页面，就选择默认地址，或者是第一个地址
				if (res.address.length) {
					this.hasAddress = true;
					if (!res.address.some((item) => {
							if (item.is_default == "1") {
								this.address = item; //有默认地址，就把收货地址设置成默认地址
								return true;
							}
						})) {
						this.address = res.address[0]; //没有默认地址，收货地址就是第一个地址
					}
				}
			}
			this.goodsList = res.carts;
			if(Object.keys(this.address).length){
				this.disabled = false;
			}
			this.totlePrice = this.goodsList.reduce((pre, goods) => { //价格累加
				return parseInt(pre) + parseInt(goods.goods.price) * goods.num //乘商品数量
			}, 0);			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.cell-page {
		padding-bottom: 20px;
	}

	/deep/ .u-cell__title-text--large {
		font-size: 18px;
		font-weight: bold;
	}

	/deep/ .u-cell__label--large {
		font-size: 16px;
	}

	.goodsInfo {
		background-color: rgb(251, 250, 251);

		.goodsBaseInfo {
			width: 100%;
			height: 200rpx;
			flex-direction: column;

			.priceNum {
				width: 100%;

			}
		}
	}

	.title,
	.price {
		font-weight: 800;
	}

	.price {
		color: #e83333;
	}

	.bottomFixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
	}

	/*#ifdef MP-WEIXIN*/
	.bottomFixed {
		bottom: 0;
		z-index: 99999;
	}

	/*#endif*/
</style>
